<!-- 共享直播列表 -->
<template>
  <div id="shareRoomList">
    <div class="search_box">
      <ul class="search">
        <li class="left">
          <i style="padding-right: 0.5rem;" class="iconfont icon-back" @click.stop="gotoMember"></i>
          <span>{{ isCateStyle ? "列表" : "首页" }}</span>
        </li>
        <li class="right">
          <form action="/">
            <van-search v-model="kwd" shape="round" placeholder="请输入主播/直播内容" @search="onSearch"/>
          </form>
        </li>
      </ul>
    </div>
    <template v-if="!isCateStyle">
      <van-swipe :autoplay="4000" indicator-color="#f15353" :width="fun.getPhoneEnv() == 3 ? 375 : clientWidth" v-if="!fun.isTextEmpty(liveBanner)">
        <van-swipe-item v-for="(slide, index) in liveBanner" :key="index">
          <a :href="slide.url" style="display: block; background: #fff;">
            <img style="height: 11.25rem; padding: 0.5rem 0.875rem; border-radius: 1.5rem; width: 100%;" :src="slide.thumb_src" />
          </a>
        </van-swipe-item>
      </van-swipe>

      <div class="ment">
        <van-swipe
          :autoplay="0"
          indicator-color="#f15353"
          class="sw_list"
          :width="fun.getPhoneEnv() == 3 ? 375 : clientWidth"
          :class="{
            sw_list_6: category != null && category.length > 0 && category[0].length <= 5,
            sw_list_12: category != null && category.length > 0 && category[0].length > 5,
            sw_list_0: category.length == 0
          }"
        >
          <van-swipe-item v-for="(items, i) in category" :key="i">
            <ul>
              <li v-for="(item, i) in items" :key="i" style="float: left;" :class="[fun.getPhoneEnv() == 3 ? 'pcStyle' : '']">
                <router-link :to="fun.getUrl('shareRoomList',{}, { CAT: item.id })">
                  <div class="image" v-if="item.thumb_src">
                    <img :src="item.thumb_src" />
                  </div>
                  <div class="image" v-if="!item.thumb_src">
                    <img src="require('@assets/images/img_default.png')" />
                  </div>
                  <p class="text">{{ item.category_name }}</p>
                </router-link>
              </li>
            </ul>
          </van-swipe-item>
        </van-swipe>
      </div>
    </template>


    <van-tabs v-model="active" @change="changeTab">
      <van-tab title="全部" name="-2"></van-tab>
      <van-tab title="推荐" name="-1"></van-tab>
      <van-tab title="直播中" name="1"></van-tab>
      <van-tab title="预告" name="0"></van-tab>
      <van-tab title="回放" name="2"></van-tab>
    </van-tabs>

    <div class="living-box" v-if="newArray1.length || newArray2.length">
      <ul ref="newArray1" class="zq-waterfall-left living-item">
        <li class="" v-for="(item, index) in newArray1" :key="index" @click="gotoRoom(item.status,item.id)">
          <div class="bg">
            <img :src="item.image_url" alt="" />
          </div>
          <div class="title">
            <!-- <img :src="item.avatar" alt="" /> -->
            <span class="name">{{ item.nickname }}</span>
          </div>
          <div class="top">
            <span class="red" v-if="item.status != 2">{{item.status_name}}</span><span class="red huifan_color" v-if="item.status == 2&&item.shop_playback == 1">{{item.status_name}}</span>{{ item.total_num }}观看
          </div>
          <div class="goods_icon">
            <i class="iconfont icon-zb_goods"></i><span>{{ item.product_num||'0' }}</span>
          </div>
          <div class="bottom overflow1">{{ item.title }}</div>
        </li>
      </ul>
      <ul ref="newArray2" class="zq-waterfall-right living-item">
        <li class="" v-for="(item, index) in newArray2" :key="index" @click="gotoRoom(item.status,item.id)">
          <div class="bg">
            <img :src="item.image_url" alt="" />
          </div>
          <div class="title">
            <!-- <img :src="item.avatar" alt="" /> -->
            <span class="name">{{ item.nickname }}</span>
          </div>
          <div class="top">
            <span class="red" v-if="item.status != 2">{{item.status_name}}</span><span class="red huifan_color" v-if="item.status == 2&&item.shop_playback == 1">{{item.status_name}}</span>{{ item.total_num }}观看
          </div>
          <div class="goods_icon">
            <i class="iconfont icon-zb_goods"></i><span>{{ item.product_num||'0' }}</span>
          </div>
          <div class="bottom overflow1">{{ item.title }}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { scrollMixin } from "utils/mixin";
import { debounce } from "lodash";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      isCateStyle: false,
      kwd: null,
      active: '-1',
      liveBanner: [],
      category: [],
      clientWidth: document.body.clientWidth,

      //more
      isLoadMore: true,
      page: 1,
      total_page: 0,
      isloading: false, //是否正在请求状态，true时为空图片不显示

      newArray1: [],
      newArray2: [],
    };
  },

  activated() {
    this.clickNum = 1;
    this.isCateStyle = this.$route.query.CAT || false;
    this.getIndexData();
    this.getData();
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    gotoMember(){
      if(this.isCateStyle) return this.gotoUrl('shareRoomList');
      return this.gotoUrl('member');
    },
    gotoUrl(name, params = {},query = {}) {
      this.$router.push(this.fun.getUrl(name, params, query));
    },
    gotoRoom(status,id){
      let name = 'shareRoomPlayer';
      if(status == 0) name = 'shareRoomForeshow';
      this.gotoUrl(name, {}, {RId: id, CAT: this.$route.query.CAT || 0, STAT: this.active >= 0 ? this.active : '', REC: this.active == '-1' ? 1 : ''});
    },
    async getIndexData() {
      let { msg, result, data } = await $http.get("plugin.share-room.frontend.controllers.index.index", {}, ".");
      if (result == 0) {
        return this.$toast(msg);
      }
      this.liveBanner = data.slide;
      if (!this.fun.isTextEmpty(data.category)) {
        this.category = this.fun.chunk(data.category, 10);
      }
    },
    changeTab : debounce(function() {
      this.clickNum += 1;
      this.getData();
    }, 500),
    async getData() {
      let activeIndex = this.clickNum;
      this.newArray1 = [];
      this.newArray2 = [];
      let { msg, result, data } = await $http.post("plugin.share-room.frontend.controllers.index.room-list", {
        category_id: this.$route.query.CAT||0,
        status: this.active >= 0 ? this.active : '' ,
        is_recommend: this.active == '-1' ? 1 : '',
        keyword: this.kwd
      }, ".", true);
      if (result == 0) return this.$toast(msg);
      if(activeIndex != this.clickNum) {
        return;
      }
      this.recordsList = [];
      this.newArray1 = [];
      this.newArray2 = [];
      this.isLoadMore = true;
      this.total_page = data.list.last_page;
      if (!this.total_page) {
        this.total_page = 0;
      }
      this.recordsList = data.list.data;
      this.sort(0, data.list.data,activeIndex);
    },
    // 图片加载完回调
    getImg(url, callback, callback2) {
      let img = new Image();
      img.src = url;
      //如果图片被缓存，则直接返回缓存数据
      if (img.complete) {
        /* callback(img.width, img.height); */
        callback(img.width, img.height, Number(img.height) / Number(img.width));
      } else {
        //完全加载完毕的事件
        img.onload = function() {
          /* callback(img.width, img.height); */
          callback(img.width, img.height, Number(img.height) / Number(img.width));
        };

        img.onerror = function() {
          callback2();
        };
      }
    },
    sort(arg, list,activeIndex) {
      let _activeIndex = activeIndex;
      let that = this;
      let index = arg || 0;
      if (list.length > index) {
        that.getImg(
          list[index].cover,
          function(w, h, r) {
            if(_activeIndex != that.clickNum) {
              return;
            }
            let boxA = 0;
            let boxB = 0;

            if (document.getElementsByClassName("zq-waterfall-left")[0]) {
              boxA = document.getElementsByClassName("zq-waterfall-left")[0].clientHeight;
            }

            if (document.getElementsByClassName("zq-waterfall-right")[0]) {
              boxB = document.getElementsByClassName("zq-waterfall-right")[0].clientHeight;
            }
            if (boxA <= boxB) {
              that.newArray1.push(list[index]);
              that.$nextTick(() => {
                that.sort(index + 1, list,activeIndex); //加载完再递归
              });
            } else {
              that.newArray2.push(list[index]);
              that.$nextTick(() => {
                that.sort(index + 1, list,activeIndex);
              });
            }
          },
          function() {
            list[index].cover = "https://www.yunzmall.com/addons/yun_shop/static/app/img/agreen_video@2x.png";
            that.$nextTick(() => {
              that.sort(index, list,activeIndex);
            });
          }
        );
      }
      if (list.length - 1 == index) {
        this.isLoadMore = true;
        this.showLoading = true;
      }
    },
    onSearch() {
      this.getData();
    },
    //获取更多数据
    getMoreData() {
      const that = this;
      that.isLoadMore = false; // 防止多次请求分页数据
      if (that.active == "1") {
        return;
      }
      if (this.page >= this.total_page) {
        return;
      } else {
        let _url = null;
        let _json = {
          category_id: this.$route.query.CAT||0,
          status: this.active >= 0 ? this.active : '' ,
          is_recommend: this.active == '-1' ? 1 : '',
          keyword: this.kwd
        };
        this.page = this.page + 1;
        _json.page = this.page;
        $http.get(_url, _json, "加载中").then(
          response => {
            that.isLoadMore = true;
            if (response.result === 1) {
              let oldLength = that.recordsList.length;
              var myData = response.data.list.data;
              that.recordsList = that.recordsList.concat(myData); //数组拼接
              that.sort(oldLength, that.recordsList);
            } else {
              that.page = that.page - 1;
              that.isLoadMore = false;
            }
          },
          function(response) {
            // error callback
          }
        );
      }
    }
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#shareRoomList {
  .search_box {
    .search {
      height: 2.75rem;
      line-height: 2.75rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 0.875rem;
      background-color: #fff;

      .left {
        font-size: 16px;
        display: flex;
        font-weight: bold;

        i {
          color: #333;
          font-size: 1rem;
        }

        span {
          display: block;
          margin: 0 0.25rem;
          max-width: 5.75rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #333;
          font-size: 1rem;
        }

        i:last-child {
          font-size: 1.125rem;
        }
      }

      .right {
        display: flex;
        border-radius: 1rem;
        font-size: 14px;
        color: #c9c9c9;
      }
    }
  }
  .ment {
    background: #fff;
  }
  .sw_list {
    ul {
      margin: 0.875rem 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;

      li {
        list-style: none;
        width: 20%;
        float: left;
        margin: 0;
        padding: 0;
        margin-bottom: 0.625rem;

        a {
          color: #2b2f33;
        }

        .image {
          height: 11vw;
          width: 100%;
          overflow: hidden;
        }

        img {
          width: 50%;
          vertical-align: middle;
          height: 90%;
          border-radius: 50%;
        }

        p {
          margin: 0;
          font-size: 12px;
          line-height: 1.125rem;
          max-height: 2.25rem;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          padding: 0 0.5rem;
          display: block;
        }
      }

      .pcStyle {
        .image {
          height: 2.625rem;
        }
      }
    }
  }

  .sw_list_6 {
    min-height: 6rem;
  }

  .sw_list_12 {
    min-height: 10rem;
  }

  .sw_list_0 {
    min-height: 0;
  }

  @media all and (max-width: 400px) {
    .sw_list_12 {
      height: 12rem;
    }
  }

  .living-box {
    background: #fff;
    margin-bottom: 0;
    padding: 0.8rem;
  }
  .living-item {
    margin: 0;
    margin-bottom: 0.875rem;
    width: 48%;
    overflow: hidden;
    vertical-align: top;
    display: inline-block;

    li {
      margin-bottom: 0.875rem;
      position: relative;
    }

    .bg {
      width: 100%;
      border-radius: 0.313rem;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        min-height: 5rem;
      }
    }

    .title {
      display: flex;

      img {
        flex: 0 0 1.656rem;
        width: 1.656rem;
        height: 1.656rem;
        border-radius: 50%;
        margin-top: -0.625rem;
        border: 0.125rem solid #fff;
      }

      .name {
        display: inline-block;
        flex: 1;
        text-align: left;
        line-height: 1rem;
        margin-left: 0.25rem;
        overflow: hidden; /* 超出部分隐藏 */
        text-overflow: ellipsis; /* 超出部分显示省略号 */
        white-space: nowrap; /* 规定段落中的文本不进行换行 */
      }
    }

    .top {
      position: absolute;
      top: 0.5rem;
      left: 0.25rem;
      background-color: rgba(0, 0, 0, 0.4);
      border-radius: 0.15rem;
      color: #fff;
      padding: 0 0.15rem 0 0;
      font-size: 12px;
      height: 1.25rem;
      line-height: 1.25rem;

      .red {
        background-color: #f10303;
        border-radius: 0.15rem;
        padding: 0 0.25rem;
        margin-right: 0.2rem;
        display: inline-block;
        height: 100%;
      }

      .van-count-down {
        display: inline-block;
        color: #fff;
        font-size: 14px;
      }

      .huifan_color {
        background-color: #999;
      }
    }

    .goods_icon {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      font-size: 12px;
      height: 1.25rem;
      line-height: 1.25rem;

      i {
        font-size: 1.625rem;
        color: #ffa303;
      }

      span {
        background-color: #fff;
        border-radius: 0.266rem;
        color: #f00;
        position: absolute;
        right: -4px;
        height: 0.875rem;
        line-height: 0.875rem;
        font-size: 0.625rem;
        padding: 0 0.15rem;
      }
    }

    .bottom {
      width: 100%;
      height: 2.5rem;
      line-height: 1rem;
      position: absolute;
      bottom: 1.25rem;
      left: 0;
      font-weight: 700;
      font-size: 0.875rem;
      color: #fff;
      text-align: left;
      padding: 0 0.5rem;
    }

    .overflow1 {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      // text-shadow: 0 1px #f5f5f5, 1px 0 #f5f5f5, -1px 0 #f5f5f5, 0 -1px #f5f5f5;
    }
  }

  .zq-waterfall-left {
    margin-right: 0.5rem;
  }
}
</style>
